<template>
    <div>
        <el-drawer
            :title="entryInfo.title"
            :visible.sync="visibleTemp"
            direction="btt"
            size="90%"
            @close="closeModal"
            :close-on-click-modal="false"
            v-loading="loadingAll"
        >
            <el-table :data="list" size="mini" @row-click="rowClick" height="calc(50vh - 100px)" border>
                <el-table-column show-overflow-tooltip prop="calculateValue" label="实际值"></el-table-column>
                <el-table-column show-overflow-tooltip prop="thresholdValue" label="设置值">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.calculateValue != null ? CompareDirection[scope.row.compareType] + '' + scope.row.thresholdValue : '--' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="thresholdType" label="触警状态">
                    <template slot-scope="scope">
                        <el-tooltip
                            v-if="scope.row.thresholdType === '4'"
                            class="item"
                            effect="dark"
                            :content="scope.row.errorMessage"
                            placement="top"
                        >
                            <span
                                :style="{
                                    display: 'inline-block',
                                    padding: '2px 4px',
                                    borderRadius: '2px',
                                    backgroundColor: typeStype[scope.row.thresholdType].color,
                                    color: typeStype[scope.row.thresholdType].fontColor,
                                }"
                                >{{ typeStype[scope.row.thresholdType].name }}
                            </span>
                        </el-tooltip>
                        <span
                            v-else
                            :style="{
                                display: 'inline-block',
                                padding: '2px',
                                borderRadius: '2px',
                                backgroundColor: typeStype[scope.row.thresholdType].color,
                                color: typeStype[scope.row.thresholdType].fontColor,
                            }"
                            >{{ typeStype[scope.row.thresholdType].name }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="fundCode" label="触警基金代码"></el-table-column>
                <el-table-column show-overflow-tooltip prop="fundNameSt" label="触警基金名称"></el-table-column>
                <el-table-column show-overflow-tooltip prop="stockCode" label="触警证券代码"></el-table-column>
                <el-table-column show-overflow-tooltip prop="stockNameSt" label="触警证券简称"></el-table-column>
                <el-table-column show-overflow-tooltip prop="issueInfoName" label="发行人"></el-table-column>
            </el-table>
            <el-table
                :data="riskBrandDetail"
                @expand-change="expandChange"
                size="mini"
                row-key="brandResultId"
                :expand-row-keys="expandKeys"
                height="calc(50vh - 80px)"
                style="margin-top: 10px"
                border
                v-loading="loadingDetail"
            >
                <el-table-column show-overflow-tooltip type="expand">
                    <template slot-scope="scope">
                        <ItemRealTimeStockDetail :data="scope.row.childList" />
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="branchKey" label="静态分支编码"></el-table-column>
                <el-table-column show-overflow-tooltip prop="branchName" label="分支名称"></el-table-column>
                <el-table-column show-overflow-tooltip prop="branchNo" label="分支序号"></el-table-column>
                <el-table-column show-overflow-tooltip prop="branchValue" label="分支计算结果">
                    <template #default="{ row }">
                        <span>{{ row.branchValue != undefined ? getFormat(row.branchValue) : '' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeModal">取 消</el-button>
                <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil from '@/utils/diction-const-util';
import ItemRealTimeStockDetail from './item-real-time-stock-detail.vue';
import { monitorDetailColumnCache, getEntryResultBranchDetail } from '@/pages/risk-monitoring/api';
import { numberFormat, numberFormatXDAY, getConfigItem } from '@/utils/tools';

@Component({ name: 'RangeIndicatorsDatasource', components: { ItemRealTimeStockDetail } })
export default class RangeIndicatorsDatasource extends Vue {
    numberFormat = numberFormat;
    numberFormatXDAY = numberFormatXDAY;
    WEB_DOCKING = getConfigItem('WEB_DOCKING');
    @PropSync('visible') syncVisible: boolean;
    @Prop({ default: '' }) entryInfo: string;
    @Prop({ default: () => [] }) list: any[];

    private visibleTemp = false;

    private CompareDirection = {
        '0': '>',
        '1': '<',
        '2': '>=',
        '3': '<=',
        '4': '=',
        '5': '<>',
        '6': ' ',
    };
    private typeStype = {
        '0': {
            name: '合规',
            color: '#95f204',
            fontColor: '#333333',
        },
        '1': {
            name: '警告',
            color: '#f59a23',
            fontColor: '#ffffff',
        },
        '2': {
            name: '送审',
            color: '#ffff00',
            fontColor: '#333333',
        },
        '3': {
            name: '禁止',
            color: '#d9001b',
            fontColor: '#ffffff',
        },
        '4': {
            name: '错误',
            color: '#333333',
            fontColor: '#ffffff',
        },
    };
    private ThresholdTypeColor = DictionConstUtil.ThresholdTypeColor;

    private riskBrandDetail = [];

    private loadingAll: boolean = false;

    private loadingDetail: boolean = false;

    private expandKeys = [];

    getFormat(val) {
        if (this.WEB_DOCKING === 'CIBFUND') {
            return numberFormatXDAY(val);
        }
        return numberFormat(val);
    }

    @Watch('visible')
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
            this.riskBrandDetail = [];
        }
    }

    // 点击行
    rowClick(row) {
        this.riskBrandDetail = row.riskBrandDetail || [];
        // this.loadingAll = true;
        // getEntryResultBranchDetail(row.resultId).then((result: any) => {
        //     this.riskBrandDetail = result;
        //     // item.childList
        //     // for (const resultItem of itemResult) {
        //      //   resultItem.fundCodeText = await DictionConstUtil.FNFundShowCode(resultItem.fundCode);
        //     // }
        // }).finally(() => {
        //     this.loadingAll = false;
        // });
    }

    // 展开下表的行
    expandChange(row, data) {
        this.riskBrandDetail.forEach((item, index) => {
            if (item.brandResultId === row.brandResultId) {
                if (item.childList == undefined) {
                    // 当前分支明细没有数据，要从后台查数据了
                    this.loadingDetail = true;
                    monitorDetailColumnCache({ brandResultId: row.brandResultId, entryCode: row.entryCode })
                        .then((result: any) => {
                            item.childList = result || [];
                            this.expandKeys.push(row.brandResultId);
                        })
                        .finally(() => {
                            this.loadingDetail = false;
                        });
                }
                return;
            }
        });
    }

    // 关闭弹窗
    closeModal() {
        this.syncVisible = false;
    }

    onSubmit() {
        this.$emit('on-submit');
        this.closeModal();
    }
}
</script>
